<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="Lineas">
    <div id="Lineas"  style="width: 100%; height: 300px"></div>
    <div class="week-month-year">
      <div class="item" :class="{'is':onShow}"  @click="week">周</div>
      <div class="item" :class="{'is':offShow}" @click="month">月</div>
      <div class="item" :class="{'is':offShow}" @click="year">年</div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

import { getarea, getAreas } from '@/api/user.js'
export default {
  // props: ['Point'],

  data () {
    return {
      onShow: true,
      offShow: false,
      area: []
    }
  },
  async beforeCreate () {
    const area = await getarea('1', moment(moment().week(moment().week()).startOf('week').valueOf()).format('YYYY-MM-DD'), moment(moment().valueOf()).format('YYYY-MM-DD'))
    const Areas = await getAreas(moment(moment().week(moment().week()).startOf('week').valueOf()).format('YYYY-MM-DD'), moment(moment().valueOf()).format('YYYY-MM-DD'))
    const data = area.data
    const data1 = Areas.data
    await this.myEcharts(data, data1)
  },
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Lineas',
  methods: {
    async week () {
      this.onShow = true
      this.offShow = false
      const area = await getarea('1', moment(moment().week(moment().week()).startOf('week').valueOf()).format('YYYY-MM-DD'), moment(moment().valueOf()).format('YYYY-MM-DD'))
      const Areas = await getAreas(moment(moment().week(moment().week()).startOf('week').valueOf()).format('YYYY-MM-DD'), moment(moment().valueOf()).format('YYYY-MM-DD'))
      const data = area.data
      const data1 = Areas.data
      await this.myEcharts(data, data1)
    },
    async month () {
      this.onShow = true
      this.offShow = false
      const area = await getarea('1', moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD'), moment(moment().valueOf()).format('YYYY-MM-DD'))
      const Areas = await getAreas(moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD'), moment(moment().valueOf()).format('YYYY-MM-DD'))
      const data = area.data
      const data1 = Areas.data
      await this.myEcharts(data, data1)
    },
    async year () {
      this.onShow = true
      this.offShow = false
      console.log(moment(moment().year(moment().year()).startOf('year').valueOf()).format('YYYY/MM/DD'), moment(moment().valueOf()).format('YYYY/MM/DD'))
      const area = await getarea('2', moment(moment().year(moment().year()).startOf('year').valueOf()).format('YYYY-MM-DD'), moment(moment().valueOf()).format('YYYY-MM-DD'))
      const Areas = await getAreas(moment(moment().year(moment().year()).startOf('year').valueOf()).format('YYYY-MM-DD'), moment(moment().valueOf()).format('YYYY-MM-DD'))
      const data = area.data
      const data1 = Areas.data
      await this.myEcharts(data, data1)
    },
    myEcharts (data, data1) {
      const myChart = this.$echarts.init(document.getElementById('Lineas'))
      // 配置图表
      console.log(data1)
      const option = {
        color: ['rgba(50, 229, 255, 1)', 'rgba(250, 207, 18, 1)'],
        legend: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // dataset: {
        //   source: [
        //     ['product', '2012', '2013', '2014', '2015'],
        //     ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
        //     ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
        //     ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
        //   ]
        // },
        xAxis: [
          {
            type: 'category',
            data: data.xAxis,
            gridIndex: 0,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FFC0CB'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'blue',
                width: 1,
                type: 'solid'
              }
            },
            axisPointer: {
              type: 'shadow'
            }
          },
          {
            type: 'category',
            data: data1.xAxis,

            gridIndex: 1,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FFC0CB'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'blue',
                width: 1,
                type: 'solid'
              }
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisLabel: {
              color: '#66CDAA'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#66CDAA'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#E6E6FA',
                width: 1,
                type: 'solid'
              }
            },
            nameTextStyle: {
              rich: {
                legend: {
                  width: 12,
                  height: 4,
                  backgroundColor: '#87CEFA'
                },
                value: {
                  color: '#CD853F'
                }
              }
            }
          },
          {
            gridIndex: 1,
            type: 'value',
            name: '                {legend|}  {value|柱状图}',

            axisLabel: {
              color: '#FF6347'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FFDEAD'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'blue',
                width: 1,
                type: 'solid'
              }
            },
            nameTextStyle: {
              rich: {
                legend: {
                  width: 12,
                  height: 4,
                  backgroundColor: '#EE82EE'
                },
                value: {
                  color: '#FF8C00'
                }
              }
            }
          }
        ],
        grid: [
          { right: '55%', top: '20%', left: '8%' },
          { top: '20%', left: '55%', right: '0%' }
        ],
        series: [
          // These series are in the first grid.
          {
            type: 'line',
            smooth: true,
            data: data.series,

            seriesLayoutBy: 'row',
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(255, 192, 203)'
                },
                {
                  offset: 1,
                  color: 'rgba(250, 207, 18)'
                }
              ])
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(255, 192, 203)'
                },
                {
                  offset: 1,
                  color: 'rgba(250, 207, 18)'
                }
              ])
            },
            showSymbol: false
          },

          // These series are in the second grid.
          {
            type: 'bar',
            data: data1.series,

            xAxisIndex: 1,
            yAxisIndex: 1,
            barWidth: 14,
            itemStyle: {
              borderRadius: 3,
              color: this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: 'rgba(255, 192, 203,0.8)' },
                { offset: 1, color: 'rgba(255, 192, 203,0.5)' }
              ])
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
  // mounted () {
  //   this.myEcharts()
  // }
}
</script>

<style>
.week-month-year {
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.is{
  background: #fff;
    -webkit-box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    border-radius: 7px;
    font-weight: 600;

    color: #333;}
.item {
 text-align: center;
  width: 37px;
  height: 25px;
  font-size: 14px;
  color: #9ca3b4;
  cursor: pointer;
}

</style>
